<template>
    <ListLayout class="zcgl-xmgl-list-wrap">
        <el-table slot="table" :ref="tableRef" :data="page.list" class="background-table" stripe row-key="id"
                  default-expand-all>
            <el-table-column show-overflow-tooltip label="公司/项目" prop="name"/>
            <el-table-column show-overflow-tooltip label="所在地区">
                <template slot-scope="props">{{props.row.position || '-'}}</template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="资源面积(m²)" prop="mj"/>
            <el-table-column show-overflow-tooltip label="资源数" prop="num"/>
            <el-table-column label="操作" width="300">
                <template slot-scope="props">
                    <template v-if="['GROUP', 'COMPANY'].includes(props.row.type)">
                        <el-button type="text" class="in-text-button in-text-primary" @click="handleCompany()">添加公司</el-button>
                        <el-button type="text" class="in-text-button in-text-primary" @click="editPageHandler({companyName: props.row.name, companyId: props.row.id})">添加项目</el-button>
                    </template>
                    <template v-if="['COMPANY', 'PROJECT'].includes(props.row.type)">
                        <el-button type="text" class="in-text-button in-text-edit" @click="handleCompany(props.row)">编辑</el-button>
                        <el-button type="text" class="in-text-button in-text-remove" @click="deleteHandler([{ id: props.row.id }])">删除</el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>

        <add-company ref="addCompanyRef"/>
    </ListLayout>
</template>

<script>
    export default JBoot({
        components: {
            'add-company': require('./add-company').default
        },

        props: {},

        data() {
            return {
                moduleName: 'xmgl',
                createPageName: 'xmglInfo'
            };
        },

        computed: {},

        methods: {
            initPageInfo(response) {
                let root = response || {},
                    result = qh(root.children);

                function qh(source) {
                    let mj = 0, num = 0;

                    (source || []).forEach(item => {
                        if(item.children && item.children.length > 0){
                            let res = qh(item.children);

                            item.mj = res.mj.toFixed(2);
                            item.num = res.num;
                        }

                        mj += Number(item.mj || 0);
                        num += Number(item.num || 0);
                    });

                    return { mj, num };
                }

                root.mj = result.mj;
                root.num = result.num;

                this.$set(this.page, 'list', [root]);
            },

            handleCompany (company){
                this.$prompt(undefined, (company ? '编辑' : '添加') + '公司', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPlaceholder: '请输入公司名称',
                    inputPattern: /\S+/,
                    inputErrorMessage: '请输入公司名称',
                    inputValue: company ? company.name : undefined
                }).then(({ value }) => {
                    this.$api('xmgl', 'addCompany').then(response => {
                        this.$success('添加公司成功');

                        this.queryHandler();
                    })
                }).catch(() => {});
            }
        },

        watch: {}
    }).list().build();
</script>

<style lang="scss">
    .zcgl-xmgl-list-wrap {
    }
</style>
